<template>
	<view >
		<uni-card class="cardCss" v-for="(item,index) in practicals" :key="index" @click="toSeriesList(item.name)">
			<template v-slot:title>
				<uni-list>
					<uni-list-item>
						<template v-slot:body>
							<text class="slot-text">{{item.title}}</text>
						</template>
					</uni-list-item>
				</uni-list>
			</template>
			<image style="width: 100%;height: 80vw;" :src="item.url"></image>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				practicals: [{
						title: "动漫系列",
						url: "../../static/series/cartoon.jpg",
						name:"动漫"
					},
					{
						title: "寓言故事系列",
						url: "../../static/series/story.jpg",
						name:"寓言故事"
					},
					{
						title: "民间系列",
						url: "../../static/series/folk.jpg",
						name:"民间"
					},
					{
						title: "红旅文化系列",
						url: "../../static/series/redCulture.png",
						name:"红旅文化"
					},
					{
						title: "创意系列",
						url: "../../static/series/creativity.jpg",
						name:"创意"
					},
				]
			}
		},
		methods: {
			toSeriesList(name){
				uni.navigateTo({
					url: '../seriesList/seriesList?seriesName='+name,
				});
			}
		},
		onLoad() {}
	}
</script>

<style>
	.cardCss {
		/* width: 90%; */
	}

	.slot-text {
		flex: 1;
		text-align: center;
		font-size: 5vw;
		color: #77d9b4;
		font-weight: bold;
	}
</style>
